<template>
	<view>
		<view class="content">
			
			<!-- 头部 -->
			<view class="title-box">
				<view @click="scanCode()" class="scan">
					<image
						src="http://rs.eonfox.cc/clzy/static/scan-ico.png"
						mode=""
						style="width:40upx; height:40upx;  "
					></image>
				</view>
				<view class="input-box" @click="openSearch">
					<view style="float: left;">
						<image src="../../static/search.png" mode=""
						style="width:40upx; height:40upx; margin-left: 10upx; margin-right: 10upx; margin-top: 10upx; "
						></image>
					</view>
					<view style=" float:left; height:100%;"><input type="text" value="" placeholder="输入关键字搜索" class="input" /></view>
				</view>
			</view>
			<!-- 语音 -->
			<!-- <audio style="text-align:left" :src="ypsrc" controls></audio> -->
			<!-- 轮播图区域  -->
			<view class="casual" v-if="itemList != ''">
				<swiper class="swiper-box" indicator-dots="true" autoplay="true" interval="3000" duration="500">
					<swiper-item class="swiper" v-for="(item, index) in itemList" :key="index">
						<image :src="qiniu + item.image_id" mode="aspectFill" class="image" @click="item_click(item.json)"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- #ifdef APP-PLUS -->
			<view v-if="setup"><web-view :webview-styles="webviewStyles" :src="src"></web-view></view>
			<!-- <view class="nav-box" >
				<input type="text" :value="i" v-for="i in a2">
			</view> -->
			<!-- #endif -->
			<!-- 商品导航区域 -->
			<view class="nav-box">
				<view class="nav-item" v-for="(item, ind) in categorize" :data-Businessid="item.type_id" @click="enterDetailsPage(item.type_id, item.name, item.json)" :key="ind">
					<!-- @tap="enterDetailsPage(item.id)" -->
					<view><image class="image" :src="qiniu + item.image_id"></image></view>
					<text>{{ item.name }}</text>
				</view>
				<view class="nav-item" @click="goStore">
					<!-- @tap="enterDetailsPage(item.id)" -->
					<view><image class="image" src="../../static/Noimg.png"></image></view>
					<text>店铺分类</text>
				</view>
				<!-- <nav-center></nav-center> -->
			</view>
			<!-- 今日推荐区域 -->
			<view class="recomend-box">
				<view class="top">
					<!-- 限时购 -->
					<view class="buy" v-if="PromptGoodsList.shop_goods_min_money">
						<view>
							<text class="title">限时购</text>
							<!-- <text class="time-item">00</text>
							<text class="time-item">88</text>
							<text class="time-item">88</text>
							<text class="time-zone">9点场</text> -->
						</view>

						<view class="goods-list">
							<view style="float:left; margin-right: 10upx;" v-for="(items, index) in PromptGoodsList" :key="index" @click="goGoodsDetails2(items.shop_goods_id)">
								<image :src="qiniu + items.shop_goods_image_main[0].image_id" mode="aspectFit"></image>

								<!-- <text class="normalSalePrice">￥{{items.price_original}}</text> -->

								<text class="nowSalePrice">￥{{ items.shop_goods_min_money / 100 }}</text>
							</view>
						</view>
					</view>
					<!-- 积分商城 -->
					<!-- <view class="nnews" v-if="integral.length!=0" v-for='(item,index) in integral' :key='index' @click="goSearch(item.json)">
						<text style="font-size:42upx; color: #444444; margin-bottom: 20upx;">{{item.name}}</text>
						<text class="time-zone spectial spectialTime"> {{item.info}}</text>
						<view class="jifen">
							<image :src="qiniu+item.image_id" class="smallImage"></image>
						</view>
					</view> -->
				</view>
				<!-- 国家地区馆、家居生活、网易严选 -->
				<view class="bottom">
					<view class="content">
						<view class="kinds" v-for="(item, index) in classList" :key="index" v-if="index < 3" @click="search(item.type_id)">
							<text clas="title">{{ item.label }}</text>
							<text class="subTitle">{{ item.name }}</text>
							<image :src="qiniu + item.image_id" mode="aspectFit"></image>
						</view>
					</view>
					<view class="content">
						<view class="kinds" v-for="(item, index) in classList" :key="index" v-if="index >= 3" @click="search(item.type_id)">
							<text clas="title">{{ item.label }}</text>
							<text class="subTitle">{{ item.name }}</text>
							<image :src="qiniu + item.image_id" mode="aspectFit"></image>
						</view>
					</view>
					<!-- <goods-show></goods-show> -->
				</view>
			</view>

			<!-- 上拉加载 -->

			<!-- <view class="getMore">
				<text v-on:click="test">{{a2}}</text>
			</view> -->
			<view class="backgroundE" v-if="sGoodsList != ''"></view>
			<!-- spike begin -->

			<view class="spikeWrapper spikeHeight" v-if="sGoodsList != ''">
				<view class="stitleWrapper">
					<img src="http://mp.emshop.eonfox.com/zrhzstatic/emShopImg/spikeListIcom.jpg" alt="" class="stitleImg" />
					<view class="stitleWord">限时购</view>
				</view>
				<!-- 商品详情列 -->
				<view class="spikeContentWrapper" v-for="(item, index) in sGoodsList" :key="index" @click="goGoodsDetail(item.id)">
					<view class="spikeConImgWrapper"><image :src="qiniu + item.image_id" mode="aspectFit" alt="" class="assembleConImg spikeConImg"></image></view>
					<view class="spikeConWordWrapper">
						<view class="spikeConTitleWord">{{ item.name }}</view>
						<view class="spikeConSaleInfoWrapper clearFix">
							<view class="spikeconSaleInfo left" v-if="item.property == 0">
								<!-- <view class="sale" v-if="item.price_min/item.price_max">{{item.price_min/item.price_max}}折</view> -->
								<!-- <view class="sale" v-if="!(item.price_min/item.price_max)">8折</view> -->
								<view class="saleMoney">￥{{ item.price_min / 100 }}</view>
								<view class="money">￥{{ item.market_price_min / 100 }}</view>
							</view>
							<view class="spikeconSaleInfo left" v-if="item.property == 1">
								<!-- <view class="sale">{{item.price_min/item.price_max}}折</view> -->
								<view class="saleMoney" style="margin-top: 8px;">{{ item.price_min / 100 }}积分</view>
								<view class="money">{{ item.market_price_min / 100 }}积分</view>
							</view>
							<view class="spikeconSaleTime right">
								<view class="time">开始时间:{{ item.when_start_time }}</view>
								<view class="begin">开抢</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 商品详情列 -->
				<view class="spikeContentWrapper endWrapper" v-for="(item, index) in sGoodsList" :key="index" @click="goNoGoodsDetail()" v-if="item.sku_stock == 0">
					<view class="spikeConImgWrapper"><image :src="qiniu + item.image_id" mode="aspectFit" alt="" class="assembleConImg spikeConImg"></image></view>
					<view class="spikeConWordWrapper">
						<view class="spikeConTitleWord">{{ item.name }}</view>
						<view class="spikeConSaleInfoWrapper clearFix">
							<view class="spikeconSaleInfo left" v-if="item.property == 0">
								<!-- <view class="sale" v-if="item.price_min/item.price_max">{{item.price_min/item.price_max}}折</view> -->
								<!-- <view class="sale" v-if="!(item.price_min/item.price_max)">8折</view> -->
								<view class="saleMoney">￥{{ item.price_min / 100 }}</view>
								<view class="money">￥{{ item.market_price_min / 100 }}</view>
							</view>
							<view class="spikeconSaleInfo left" v-if="item.property == 1">
								<!-- <view class="sale">{{item.price_min/item.price_max}}折</view> -->
								<view class="saleMoney">{{ item.price_min / 100 }}积分</view>
								<view class="money">{{ item.market_price_min / 100 }}积分</view>
							</view>
							<view class="spikeconSaleTime right">
								<view class="time" style="margin-top: 8px;">{{ item.when_start_time }}</view>
								<view class="begin">已抢光</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="backgroundE" v-if="goodsList != ''"></view>

			<!-- 拼团 -->
			<view class="assembelWrapper spikeWrapper assembelHeight" v-if="goodsList != ''">
				<view class="atitleWrapper stitleWrapper">
					<img src="http://mp.emshop.eonfox.com/zrhzstatic/emShopImg/assemble.jpg" alt="" class="atitileImg stitleImg" />
					<view class="atitleWord stitleWord">拼团抢购</view>
				</view>
				<!-- 商品详情列 -->
				<view class="assembleContentWrapper spikeContentWrapper" v-for="(item, index) in goodsList" :key="index" @click="goGroupgoodsDetails(item.id)">
					<view class="assembleConImgWrapper spikeConImgWrapper">
						<image :src="qiniu + item.image_id" mode="aspectFit" alt="" class="assembleConImg spikeConImg"></image>
					</view>

					<view class="assembleConWordWrapper spikeConWordWrapper">
						<view class="assembelConTitleWord spikeConTitleWord">{{ item.name }}</view>
						<view class="assembleConSaleInfoWrapper spikeConSaleInfoWrapper clearFix">
							<view class="assembleconSaleInfo spikeconSaleInfo left" v-if="item.property == 0">
								<!-- <view class="sale">{{(item.group_price/item.original_price)*10}}折</view> -->
								<view class="saleMoney" v-if="item.property == 0">￥{{ item.group_price / 100 }}</view>
								<view class="money" v-if="item.property == 0">￥{{ item.price / 100 }}</view>
							</view>
							<view class="assembleconSaleInfo spikeconSaleInfo left" v-if="item.property == 1">
								<!-- <view class="sale">{{(item.group_price/item.original_price)*10}}折</view> -->
								<view class="saleMoney" v-if="item.property == 1">￥{{ item.group_price / 100 }}</view>
								<view class="money" v-if="item.property == 1">￥{{ item.price / 100 }}</view>
							</view>
							<!-- 				<view class="assembleconSaleInfo spikeconSaleInfo left" v-if="item.property == 1">
								<view class="sale">{{item.group_price/item.original_money}}折</view>
								<view class="saleMoney">{{item.group_price/100}}积分</view>
								<view class="money">{{item.original_money/100}}积分</view>
							</view> -->
							<view class="assembleconSaleTime spikeconSaleTime right">
								<view class="assembletime">
									<img src="../../static/index-pages/lateTime.png" alt="" class="clock left" />
									<!-- <div v-html="item.testHTML" class="timeDiv right"></div> -->
									<!-- <view v-html="item.testHTML" class="timeDiv right"></view> -->
									<!-- 拼团时间 -->
									<!-- <div class="timeDiv right">{{item.start_time}}</div> -->

									<uni-countdown
										:day="item.timeDay"
										:hour="item.timeHour"
										:minute="item.timeMinite"
										border-color="#fff"
										color="#d62c2c"
										:second="item.timeScond"
									></uni-countdown>
								</view>
								<view class="assemblebegin clearFix">
									<img src="../../static/index-pages/team.png" alt="" class="assembleNum left" />
									<span class="pNumber left">({{ item.group_people_now }}/{{ item.group_people }})</span>

									<view class="progress progress-box left">
										<progress v-bind:percent="percentCom(item.group_people_now, item.group_people)" active stroke-width="3" activeColor="#F76161" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import eonfox from '@/components/eonfox/eonfox.js';
import fns from '@/components/eonfox/fns.js';
import version from '@/components/eonfox/version.js';
import websocketObject from '@/components/eonfox/websocket.js';
import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
// import amap from '@/node_modules/amap.js'
import AMapJS from 'amap-js';

var websocket = new websocketObject();
const innerAudioContext = uni.createInnerAudioContext();
var ef = new eonfox();
export default {
	data() {
		return {
			message: '', //是否认证
			sjID: '', //商家id
			messageID: '', //消息id
			ypsrc: '',
			integral: [],
			categorize: [], //分类菜单
			a2: [],
			unionid: '',
			qiniu: '',
			merchant_id: '',
			// 轮播图图片
			itemList: [],
			// 限时购
			time_limit: [
				{
					price_original: 288,
					price_now: 188,
					img: 'http://rs.eonfox.cc/clzy/static/raw_1521976314.png',
					href: ''
				},
				{
					price_original: 288,
					price_now: 166,
					img: 'http://rs.eonfox.cc/clzy/static/raw_1521976348.png',
					href: ''
				}
			],
			//每日上新数据
			new_daily: [
				{
					img: 'http://rs.eonfox.cc/clzy/static/raw_1521976632.png'
				}
			],
			setup: false,
			src: '',
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			},
			PromptGoodsList: [],
			classList: '',
			getSystemInfo: {},
			VersionNumber: '',
			system: '',
			sGoodsList: [], //秒杀（限时）商品
			goodsList: [] ,//团购商品
		};
	},
	components: {
		uniIcon,
		eonfox,
		uniCountdown
	},
	onLoad() {
		
	},
	onShow() {
		var ef = new eonfox();
		
		var _this=this;
		uni.getSystemInfo({
			success: function(res) {
				_this.getSystemInfo = res;
				// console.log(res.model);
				// console.log(res.pixelRatio);
				// console.log(res.windowWidth);
				// console.log(res.windowHeight);
				// console.log(res.language);
				// console.log(res.version);
				// console.log(res.platform);
				_this.system = res.system;
			}
		});
		// #ifdef APP-PLUS
		if (_this.system < 6) {
			uni.showModal({
				title: '提示信息',
				content: '您的手机版本过低，请使用小程序',
				success: function(res) {
					if (res.confirm) {
						plus.runtime.quit();
					} else if (res.cancel) {
						plus.runtime.quit();
					}
				}
			});
		}
		// #endif
		// console.log("获取系统信息：",uni.getSystemInfo)

		// #ifdef  APP-PLUS||MP-WEIXIN
		wx.getSetting({
			success(res) {
				if (!res.authSetting['scope.userLocation']) {
					wx.authorize({
						scope: 'scope.userLocation',
						success() {
							console.log('getLocation(index)已同意授权');
							// 用户已经同意
						}
					});
				} else {
					console.log('getLocation(index)已授权');
				}
			}
		});
		// #endif
		ef.submit({
			request: {
				images: ['APPLICATIONSLIDESHOW', [{ module: 'home', label: 'APP' }]],
				config: ['APPLICATIONCONFIG'],
				whenGoodsList: ['SHOPGOODSLIST', [{ search: { when: 1 } }]], //限时商品
				integral: ['APPLICATIONTYPEOPTION', [{ module: 'home' }]], //分类
				a: ['APPLICATIONTYPEOPTION', [{ module: 'shop_goods_type', label: 'APP首页专区' }]], //分类菜单
				s: ['APPLICATIONTYPEOPTION', [{ module: 'shop_goods_type', label: 'APP首页菜单' }]], //分类菜单
				shopGoodsList: ['SHOPGOODSLIST', [{ search: { group: 1 } }]] //团购商品
			},
			callback(data) {
				var dataList = fns.checkError(data, ['config', 'integral', 'whenGoodsList', 'images'], function(errno, error) {
					console.log(errno, error);
				});
				console.log('xxxxxxxxxx', dataList);

				if (dataList.a) {
					/* var typeSonList = [];
						
						for( var i in dataList.a ){
							if( dataList.a[i].son ){
								typeSonList = typeSonList.concat(dataList.a[i].son);
							}
						} */
					if (dataList.a[0] && dataList.a[0].son) {
						_this.classList = dataList.a[0].son;
					}
				}

				if (dataList.s) {
					_this.categorize = dataList.s;
				}

				if (dataList.integral) {
					_this.integral = dataList.integral;
				}
				//限时商品
				if (dataList.whenGoodsList && dataList.whenGoodsList.data) {
					_this.sGoodsList = dataList.whenGoodsList.data;
					console.log('限时商品', _this.sGoodsList);
				}
				//拼团商品
				if (dataList.shopGoodsList && dataList.shopGoodsList.data) {
					// countDown();
					var goodsList = dataList.shopGoodsList.data;

					//拼团时间

					goodsList.forEach(item => {
						var countDownObj = _this.countDown(item.group_start_time, item.group_end_time);
						Object.assign(item, countDownObj);
					});
					_this.goodsList = goodsList;
				}
				if (dataList.images) {
					_this.itemList = dataList.images;
					// console.log(_this.itemList)
				}

				if (dataList.config && dataList.config.qiniu_domain) {
					_this.qiniu = dataList.config.qiniu_domain;
				}
				// #ifdef APP-PLUS
				console.log('检测版本更新');

				if (dataList.config && dataList.config.app_android_version && dataList.config.app_android_version.number) {
					var Versionnumber = dataList.config.app_android_version.number;
					var info = dataList.config.app_android_version.info;
					var name = dataList.config.app_android_version.name;
					var download = dataList.config.app_android_version.download;
				}
				_this.VersionNumber = plus.runtime.version;

				uni.getSystemInfo({
					success: res => {
						console.log(res.platform);
						//检测当前平台，如果是安卓则启动安卓更新
						if (res.platform == 'android') {
							if (Versionnumber != _this.VersionNumber) {
								uni.showModal({
									title: '版本已更新',
									content: info + name,
									showCancel: true,
									confirmText: '确认更新',
									success: function(res) {
										if (res.confirm) {
											setTimeout(function() {
												plus.runtime.openURL(download);
											}, 2000);
										} else if (res.cancel) {
											plus.runtime.quit();
											console.log('用户点击取消');
										}
									}
								});
							}
						}
						if (res.platform == 'ios') {
							if (Versionnumber != _this.VersionNumber) {
								uni.showModal({
									title: '版本已更新',
									content: info + name,
									showCancel: false,
									confirmText: '确认更新',
									success: function(res) {
										if (res.confirm) {
											setTimeout(function() {
												plus.runtime.openURL('https://apps.apple.com/cn/app/%E5%88%9B%E8%81%94%E4%BC%97%E7%9B%8A/id1452979739');
											}, 2000);
										} else if (res.cancel) {
											plus.runtime.quit();
											console.log('用户点击取消');
										}
									}
								});
							}
						}
					}
				});

				// #endif
			}
		});
	},
	methods: {
		
		goStore() {
			uni.navigateTo({
				url: '../../pagesA/stores/stores'
			});
		},
		search(id) {
			uni.navigateTo({
				url: '../../pagesB/search-result/search-result?id=' + id
			});
		},
		enterDetailsPage(id, name) {
			uni.navigateTo({
				url: '../../pages/details/details?flid=' + id + '&name=' + name
				// &classifyTitle=xiaoming
			});

			console.log(id, name);
		},
		goSearch(json) {
			var j = JSON.parse(json);
			var property = 1;
			if (j.type == 'integral') {
				uni.navigateTo({
					url: '../../pagesB/search-result/search-result?property=' + property
				});
			}
		},
		gogogo() {
			websocket.admin_push(
				{
					type: '商家提现提醒',
					content: '提现IDxxxxxxxxx'
				},
				function(err) {
					//提醒失败
					console.log('！！！！！！提醒后台商家提现失败！！！！！', err);
				}
			);
		},
		gogo() {
			websocket.admin_push(
				{
					type: '商城购物下单提醒',
					content: '提现IDxxxxxxxxx'
				},
				function(err) {
					//提醒失败
					console.log('！！！！！！提醒后台商家提现失败！！！！！', err);
				}
			);
		},
		errorCB() {
			uni.navigateTo({
				url: '../../pagesB/DownloadPage/DownloadPage'
			});
		},
		goGroupgoodsDetails(group_id) {
			console.log('group_id', group_id);
			uni.navigateTo({
				url: '../../pagesA/groupGoodsDetails/groupGoodsDetails?id=' + group_id
			});
		},
		goGoodsDetails(shop_goods_id) {
			uni.navigateTo({
				url: '../../pages/goodsDetails/goodsDetails?id=' + shop_goods_id
			});
		},
		item_click(json) {
			var _this = this;
			if (json) {
				console.log('轮播图参数', json);
				var str = JSON.parse(json);
				console.log('轮播图参数', str);
				switch (str['类型']) {
					case '购物商城商品详情':
						_this.item_goods(str['商品ID']);
						break;
					case '内容管理文章详情':
						_this.item_essays(str['文章ID']);
						break;
					default:
						fns.err('该类型参数暂未做处理');
						break;
				}
			} else {
				// fns.err('json参数为空')
				console.log('json参数为空');
			}
		},
		item_goods(id) {
			if (id) {
				uni.navigateTo({
					url: '../goodsDetails/goodsDetails?id=' + id
				});
			} else {
				fns.err('商品ID未设置');
			}
		},
		item_essays(newsId) {
			if (newsId) {
				uni.navigateTo({
					url: '../../pagesA/InformationDetails/InformationDetails?newsId=' + newsId
				});
			} else {
				fns.err('文章ID未设置');
			}
		},
		test() {
			console.log('获取Token:', ef.token());
		},
		openSearch() {
			uni.navigateTo({
				url: '../../pages/search/search'
			});
		},
		openNews() {
			uni.navigateTo({
				url: '../../pagesB/news/news'
			});
		},
		openNearby() {
			uni.navigateTo({
				url: '../nearbyBusiness/nearbyBusiness'
			});
		},
		openshoppingCar() {
			uni.navigateTo({
				url: '../shoppingCar/shoppingCar'
			});
		},
		openMe() {
			uni.navigateTo({
				url: '../../pagesA/register/register'
			});
		},
		scanCode() {
			var _this = this;
			// 				uni.showToast({
			// 					// #ifdef H5
			// 					title:'请使用微信小程序或APP',
			// 					icon:'none',
			// 					// #endif
			// 					success(){
			// 						setTimeout(function(){
			//
			// 						},1500)
			// 					}
			// 				})
			uni.scanCode({
				onlyFromCamera: true,
				success: function(res) {
					console.log('res:', res);
					if (res.result) {
						var re = res.result;
						console.log('res.result:', re);
						//JSON参数
						var data = JSON.parse(re);
						if (!data.errno) {
							switch (data.type) {
								case 'merchant_money_plus':
									_this.merchant_id = data.data.merchant_id;
									if (data.data && data.data.user_id) {
										var user_id = data.data.user_id;
									} else {
										var user_id = '';
									}

									uni.navigateTo({
										url: '../../pagesB/payUser/payUser?mch_id=' + data.data.merchant_id + '&user_id=' + user_id
									});
									break;
								default:
									uni.showToast({
										title: '二维码未知',
										icon: 'none'
									});
									break;
							}
						} else {
							uni.showToast({
								title: data.error,
								icon: 'none'
							});
						}
					}
				}
			});
		},
		countDown(start_time, end_time) {
			var cDown = end_time - start_time;
			if (cDown > 0) {
				var d = Math.floor(cDown / 60 / 60 / 24);
				var h = Math.floor((cDown / 60 / 60) % 24);
				var m = Math.floor((cDown / 60) % 60);
				var s = Math.floor(cDown % 60);
			} else {
				return false;
			}
			return {
				timeDay: d,
				timeHour: h,
				timeMinite: m,
				timeScond: s
			};
			console.log(d);
		},
		percentCom(num, now_num) {
			return (now_num / num) * 100;
		},
		goGoodsDetails2(id, label) {
			uni.navigateTo({
				url: '../../pages/goodsDetails/goodsDetails?id=' + id + '&label=' + label
			});
		},
		goGoodsDetail(id) {
			uni.navigateTo({
				url: '../../pages/goodsDetails/goodsDetails?id=' + id
			});
		}
	}
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.content
	width 100%
	text-align center
	overflow-y sroll
	.title-box
		display flex
		justify-content center // 水平居中
		align-items center // 垂直居中
		flex-direction row//左到右
		width 710upx
		padding 0 20upx
		height 100upx
		.scan
			width 40upx
			height 40upx
		.input-box
			margin-left 20upx
			width 650upx
			height 58upx
			border 1upx solid #d3d3d3
			.search
				display inline-block
				position absolute
				top 0
				left 0
			.input
				width 80%
				display inline-block
				font-size 28upx
				text-align left
				line-height 100%
				height 100%
		.chat
			flex 1
	.casual
		width 100%
		height 400upx
		.swiper-box
			width 100%
			height 100%
			.swiper
				width 100%
				height 100%
				.image
					width 100%
					height 100%
	.nav-box
		display flex
		flex-wrap wrap
		width 100%
		margin 50upx 0upx
		.nav-item
			display flex
			flex-direction column
			justify-content center
			align-items center
			width 25%
			font-size 24upx
			margin 20upx 0
			color #666666
			.image
				width 70upx
				height 70upx
	.recomend-box
		width 100%
		height auto
		// background-color #ccc
		.top
			display flex
			// justify-content center   // 水平居中
			align-items center // 垂直居中
			flex-direction row
			width 100%
			height 50%
			background-color #fff
			.buy, .new
				width 100%
				height 300upx
				float left
				text-align left
				margin-left 3%
				.title
					font-size 40upx
					font-weight 600
					margin-right 10upx
				.spectial
					display block
					text-align left
					margin-bottom 20upx
				.spectialTime
					margin-top 5upx
				.time-item
					width 20upx
					height 20upx
					color #fff
					font-size 20upx
					margin-right 8upx
					background-color #333
				.time-item::after
					content ':'
					background-color #fff
					color #333
				.time-zone
					font-size 24upx
				.goods-list
					width 48%
					height 70%
					margin-top 36upx
					display flex
					image
						width 130upx
						height 130upx
					.nowSalePrice
						font-size 24upx
						color red
						margin-right 10upx
					.normalSalePrice
						font-size 18upx
						color #ccc
			.new
				width 50%
				height 300upx
		.bottom
			// display flex
			width 100%
			.content
				display flex
				flex-direction row
				width 100%
				margin-bottom 40upx
				.kinds
					width 32.5%
					height 300upx
					text-align center
					.title
						display block
						font-size 40upx
						font-weight 600
					.subTitle
						display block
						font-size 24upx
						margin 10upx 0 40upx
					image
						width 210upx
						height 150upx
						border-radius 10upx
.selected-activities-content
	width 100%
	height 100%
	.selected-activities
		width 100%
		height 150upx
		background-color #f4f3f3
		display flex
		flex-direction row
		justify-content center
		align-items center
		.selected-activities-text
			font-size 40upx
			font-weight 600
	.recomend-goods-box
		width 100%
		background-color #fff
		.recomend-goods-item1
			display inline-block
			width 30%
			height 240upx
			margin 20upx 10upx
			background-color #f4f3f3
			text
				display block
				font-size 24upx
				text-align center
				margin-bottom 5upx
			text:nth-child(1)
				padding-top 10upx
			.img-box
				width 100%
				height 50%
				display flex
				justify-content center
				align-items center
				image
					width 80upx
					height 80upx
					margin 0 auto
		.recomend-goods-item2
			display inline-block
			width 30%
			height 240upx
			margin 20upx 10upx
			.img-box
				width 100%
				height 50%
				display flex
				justify-content center
				align-items center
				image
					width 150upx
					height 150upx
			.des
				display block
				font-size 24upx
				margin 30upx 0 5upx
				color #666
			.price
				font-size 32upx
				color red
.getMore
	width 100%
	height 150upx
	align-items center
	background-color #f4f3f3
	font-size 28upx
	line-height 100upx
</style>
<style>
.backgroundE {
	width: 100%;
	height: 30upx;
	background: #dddddd;
	border-color: #bbb;
}
.left {
	float: left;
}
.right {
	float: right;
}
.title-box1 {
	width: 100%;
	height: 60px;
	color: #6666;
	font-size: 18px;
	line-height: 60px;
	background-color: #fff;
	text-align: center;
}
.nnews {
	width: 96%;
	height: 400upx;
	margin-left: 2%;
}
.jifen {
	width: 100%;
	height: 300upx;
}
.jifen image {
	width: 100%;
	height: 100%;
	border-radius: 20upx;
}

.goodsWrapper .titleWrapper,
.spikeWrapper .stitleWrapper {
	padding: 20upx 0 0 0;
	width: 100%;
	display: flex;
	align-items: center;
}

.goodsWrapper .titleWrapper .titleImg,
.spikeWrapper .stitleWrapper .stitleImg {
	display: block;
	width: 36upx;
	height: 36upx;
	margin: 0 20upx;
}

.goodsWrapper .titleWrapper .titleWord,
.spikeWrapper .stitleWrapper .stitleWord {
	font-family: PingFangSC;
	font-weight: 700;
	font-size: 36upx;
	color: rgb(251, 149, 41);
	font-style: normal;
	letter-spacing: 0px;
	text-decoration: none;
	/* flex: 1; */
}

.goodsDetailWrapper {
	width: 100%;
	height: auto;
}

.goodsDetailWrapper .goodsDetail {
	width: 33.3%;
	height: 200px;
	overflow: hidden;
}

.goodsDetailWrapper .goodsDetail .goodsImgWrapper {
	position: relative;
	width: 70%;
	margin-left: 15%;
}

.goodsDetailWrapper .goodsDetail .goodsImgWrapper .goodsImg {
	width: 100%;
	height: 200upx;
	display: block;
}

.goodsDetailWrapper .goodsDetail .goodsImgWrapper .goodsWord {
	position: absolute;
	left: -30upx;
	bottom: -18upx;
	width: 60upx;
	height: 36upx;
	line-height: 36upx;
	font-size: 24upx;
	color: #fff;
	background-color: rgb(247, 97, 97);
	border-width: 0px;
	border-style: solid;
	text-align: center;
}

.goodsDetailWrapper .goodsDetail .goodsNameWrapper {
	margin-top: 35upx;
	margin-bottom: 16upx;
	padding-top: 17upx;
	width: 90%;
	margin-left: 5%;
	border-top: 2upx solid rgb(217, 217, 217);
}

.goodsDetailWrapper .goodsDetail .goodsNameWrapper .goodsName {
	font-size: 24upx;
	font-family: PingFangSC;
	font-weight: 400;
	color: #666666;
	letter-spacing: 0px;
	height: 50upx;
	line-height: 40upx;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.goodsDetailWrapper .goodsDetail .goodsNameWrapper .priceWrapper {
	font-family: PingFangSC;
	height: 45upx;
	line-height: 45upx;
	font-size: 28upx;
}

.priceWrapper .salePrice {
	font-weight: 700;
	color: rgba(247, 97, 97, 1);
	letter-spacing: 0px;
	font-size: 24upx;
	margin-right: 10upx;
}

.priceWrapper .price {
	font-family: PingFangSC;
	font-weight: 400;
	font-size: 24upx;
	color: #bbbbbb;
	letter-spacing: 0px;
	text-decoration: line-through;
}

/* 秒杀开始 */
.spikeWrapper {
	width: 100%;
}
.spikeWrapper .spikeContentWrapper {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 20upx 0;
	border-bottom: 2upx solid rgb(217, 217, 217);
}

.spikeContentWrapper .spikeConImgWrapper {
	width: 250upx;
	height: 250upx;
}

.spikeContentWrapper .spikeConImg {
	width: 190upx;
	height: 190upx;
	margin: 30upx;
	max-width: 100%;
	max-height: 100%;
}

.spikeContentWrapper .spikeConWordWrapper {
	flex: 1;
	margin-right: 20upx;
}

.spikeConWordWrapper .spikeConTitleWord {
	font-family: PingFangSC;
	font-weight: 400;
	font-size: 28upx;
	color: #101010;
	font-style: normal;
	letter-spacing: 0px;
}

.spikeConWordWrapper .spikeConSaleInfoWrapper {
	margin-top: 20upx;
}

.spikeConSaleInfoWrapper .spikeconSaleInfo .sale {
	text-align: left;
	width: 90upx;
	margin: 10upx 0;
	padding-left: 8upx;
	height: 30upx;
	border: 2upx solid;
	color: rgb(247, 97, 97);
	border-color: rgb(247, 97, 97);
	font-size: 26upx;
	line-height: 30upx;
}

.spikeConSaleInfoWrapper .spikeconSaleInfo .saleMoney {
	font-family: PingFangSC;
	font-weight: 700;
	margin-top: 10upx;
	font-size: 32upx;
	color: rgba(247, 97, 97, 1);
	letter-spacing: 0;
}

.spikeConSaleInfoWrapper .spikeconSaleInfo .money {
	font-family: PingFangSC;
	font-weight: 400;
	font-size: 28upx;
	color: #666666;
	letter-spacing: 0;
	text-decoration: line-through;
}

.spikeConSaleInfoWrapper .spikeconSaleTime {
	text-align: center;
}

.spikeConSaleInfoWrapper .spikeconSaleTime .time {
	font-family: PingFangSC;
	font-weight: 700;
	font-size: 24upx;
	margin: 10upx 0;
	color: rgb(247, 97, 97);
	letter-spacing: 0px;
}

.spikeConSaleInfoWrapper .spikeconSaleTime .begin {
	height: 50upx;
	line-height: 50upx;
	font-size: 36upx;
	background-color: #e60b30;
	border-radius: 4px;
	text-align: center;
	color: #fff;
}

/* 拼团开始 */
.assembleconSaleTime {
}

.assembleconSaleTime .assembletime {
}

.assembleconSaleTime .assembletime .clock {
	margin-top: 10upx;
	height: 30upx;
	width: 30upx;
	margin-right: 8upx;
	margin-top: 14upx;
}

.assembleconSaleTime .assembletime .timeDiv {
	font-family: PingFangSC;
	font-weight: 700;
	font-size: 28upx;
	color: rgb(247, 97, 97);
	letter-spacing: 0px;
}

.assemblebegin {
	vertical-align: middle;
	height: 38upx;
}

.assemblebegin .assembleNum {
	vertical-align: middle;
	height: 38upx;
	width: 38upx;
	margin-right: 8upx;
}

.pNumber {
	font-family: PingFangSC;
	font-weight: 400;
	font-size: 24upx;
	color: rgb(102, 102, 102);
	letter-spacing: 0;
	margin-right: 8upx;
	vertical-align: middle;
}

.progress {
	width: 50%;
	margin-top: 14upx;
	vertical-align: middle;
}

.bottomImgWrapper {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottomImgWrapper .bottomImg {
	height: 80upx;
	width: 394upx;
	color: rgb(255, 255, 255);
	background-color: rgb(247, 97, 97);
	border-radius: 62px;
	font-size: 18px;
}

</style>
